<template>
	<div style="height: 100vh;overflow-y: scroll;">
		<el-row :span="24">
			<el-col :ms="24" :xs="0">

				
				<div class="regBox" v-if="is_showPop">
							<div class="regBox_pub"></div>
							<div class="regBox_main regBox_mainTow" style="height: auto;">
								<p style="color: #fff;font-size: 15px;padding: 10px 20px 5px;">{{$t('l_jine')}}</p>
								<div class="search_boxTow">
									<el-input :placeholder="$t('l_shurujine')" v-model="money"
										class="search_boxTowInput">
										<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
									</el-input>
									<div class="recycle_btnTow" @click="dailiTran()">
										{{$t('l_zhuanchu1')}}
									</div>
								</div>
								<div class="closeBtnTow" @click="closeForget">
								</div>
							</div>
						</div>

				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('l_fanhui')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{$t('l_tuiguangzhuanqian')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<!-- <div class="left" style="justify-content: flex-end;width:auto;">
									<div class="litem1" @click="getQmMoney">{{$t('l_lingqu')}}</div>
									<div class="litem2" @click="mingxi_record">{{$t('l_lingqujilu')}}</div>
								</div> -->
							</div>
							<div class="conbox">
								<div class="header">
									<!-- <div class="EuylP4i2GhrgzkTAbaf0" @click="level = true">
										<div class="img">
											<img src="../../assets/images/yh/level.png" alt="">
										</div>
										<span>
											<i style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 10.363 17.074" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_wh--sprite"></use>
												</svg>
											</i>
										</span>
									</div> -->
									<div class="tbJe4aWRACpPqK8U19l3">
										<div class="mwkrCf7T9Q6EuRxoGPvN">
											{{$t('l_zhanghao')}}
											<span>{{userInfo?userInfo.username:""}}</span>
										</div>
										<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
											{{$t('l_zhanghuyue')}}:{{userInfo?userInfo.daili_money:""}}
										</div>
										<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
											{{ $t('l_jinrishouyi') }}:{{userInfo?userInfo.day_shouyi:""}}
										</div>
										<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
											{{ $t('l_leijishouyi') }}:{{userInfo?userInfo.leiji_shouyi:""}}
										</div>
										<div class="FAnV4xyvhwu6V8VvjxOg" v-if="info && info.parentInfo">
											{{$t('l_wodeshangji')}}:
											<span>{{info.parentInfo.username}}</span>
										</div>
										<div class="FAnV4xyvhwu6V8VvjxOg" v-else-if="info && info.agentInfo">
											{{$t('l_wodeshangjidaili')}}:
											<span>{{info.agentInfo.username}}</span>
										</div>
									</div>
									<div class="KzvcBdzMHhzwjIUa04tc" @click="is_showPop=true">
										<span>{{$t('l_zhuanchu')}}</span>
										<!-- <span class="yellowColor">{{userInfo?userInfo.qm_money:""}}</span> -->
									</div>
								</div>
							</div>
							<div class="regBox" v-if="level">
								<div class="rbbox">
									<i aria-label="图标: close" class="close" @click="level = false">
										<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
											viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true"
											focusable="false" class="">
											<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
												<path id="Line_14" data-name="Line 14"
													d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z"
													transform="translate(1210.5 161.5)"></path>
												<path id="Line_15" data-name="Line 15"
													d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z"
													transform="translate(1210.5 161.5)"></path>
											</g>
										</svg>
									</i>
									<div class="title">{{$t('l_dailidengji')}}</div>
									<div class="zzccon">
										<div class="zzcconbox">
											<div class="zzcconboxheader">
												<div class="zzcleft">
													<div>{{$t('l_dailidengji')}}</div>
												</div>
												<div class="zzcright">{{$t('l_jinshengtiaojian')}}</div>
											</div>
											<div class="zzcscroll" style="height: 480px;overflow-y: scroll;">
												<div class="zzcconboxheader" style="border: 0;" v-for="item in 10">
													<div class="zzcleft">
														<img src="../../assets/images/yh/level.png" alt="">
														<div style="color: var(--theme-alt-neutral-2);">LV1</div>
													</div>
													<div class="zzcright" style="color: var(--theme-text-color);font-size: 14px;">0.00
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="con">
								<!-- <div class="left">
									<div class="litem" @click="changefanshui(0)">
										<img v-if="selectfanshui == 0" src="../../assets/images/yh/bg2.png" alt="">
										<img v-else src="../../assets/images/yh/bg3.png" alt="">
										<div class="litembox" :class="selectfanshui == 0 ? 'color':''">
											<div>{{$t('l_wodetuiguang')}}</div>
										</div>
									</div>
									<div class="litem" @click="changefanshui(1)">
										<img v-if="selectfanshui == 1" src="../../assets/images/yh/bg2.png" alt="">
										<img v-else src="../../assets/images/yh/bg3.png" alt="">
										<div class="litembox" :class="selectfanshui == 1 ? 'color':''">
											<div>{{$t('l_zhishushuju')}}</div>
										</div>
									</div>
							
								</div> -->
								<div class="right" >
									<div class="section">
										<div class="avMNK8Qg8S6ELvNBn4SS">
											<div style="color: #ffffff;">{{$t('l_fenxiangwangzhi')}}</div>
										</div>
										<div class="pcflex">
											<div class="mPCtxJBjs5n3OYLvSFuK">
												<div class="wog_6t8oeQr7zIs3lXb4">
													<div class="qrcode" ref="qrCodeUrl1"></div>
													<div class="ant-btn" @click="downloadCodeImg">
														{{$t('l_dianjibaocun')}}</div>
												</div>
											</div>
											<div class="pcflex1">
												<span>{{$t('l_wodelianjie')}}</span>
												<div class="p9A7GZum0WatM6xZcKB1">
													<el-input v-model="input" disabled />
													<span @click="copy(input)">
														<i
															style="display: inline-flex; justify-content: center; align-items: center;">
															<svg viewBox="0 0 23.001 24.3" width="1em" height="1em"
																fill="currentColor" aria-hidden="true"
																focusable="false">
																<use
																	xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite">
																</use>
															</svg>
														</i>
													</span>
												</div>
												<div class="wOSAGKl_12mfaWIJZdGo">
													<div v-for="(item,index) in iconlist" :key="index">
														<img :src="item.key" alt="">
														<span>{{item.name}}</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- <div class="section" style="margin-top: 16px;">
										<div class="avMNK8Qg8S6ELvNBn4SS">
											<div style="color: #ffffff;">{{$t('l_yongjin')}}</div>
										</div>
										<div class="pcflex" style="padding: 0;">
											<div class="secitem">
												<div>{{$t('l_leijiyongjin')}}</div>
												<div style="color: #ffaa09;">{{info?info.qm_money:0}}</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_yilingquyongjin')}}</div>
												<div style="color: #ffaa09;">{{info?info.user_lq_qm_money:0}}</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_jinriyongjin')}}</div>
												<div style="color: #ffaa09;">{{info?info.qm_money_today:0}}</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_benyueyongjin')}}</div>
												<div style="color: #ffaa09;">{{info?info.qm_money_month:0}}</div>
											</div>
										</div>
									</div>
									<div class="section" style="margin-top: 16px;margin-bottom: 30px;">
										<div class="avMNK8Qg8S6ELvNBn4SS">
											<div style="color: #ffffff;">{{$t('l_yeji')}}</div>
										</div>
										<div class="pcflex" style="padding: 0;">
											<div class="secitem">
												<div>{{$t('l_tuanduizongshu')}}</div>
												<div style="color: var(--theme-text-color);">{{info?info.zt_team_count:0}}人</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_zongyouxiaotouzhu')}}</div>
												<div style="color: var(--theme-text-color);">{{info?info.all_void_money:0}}</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_zongzhudanshu')}}</div>
												<div style="color: var(--theme-text-color);">{{info?info.all_void_count:0}}</div>
											</div>
											<div class="secitem">
												<div>{{$t('l_zongshuying')}}</div>
												<div style="color: var(--theme-text-color);">{{info?info.all_settledAmount:0}}</div>
											</div>
										</div>
									</div> -->

								</div>
								<div class="right" >
									<div style="color:#fff;padding: 5px;">
								<div style="font-size:18px;margin-bottom: 5px;">{{ $t('l_quanbu') }}:{{ userInfo.bili0 }}</div>
								<div style="font-size:18px;margin-bottom: 5px;">{{ $t('l_jintian') }}:{{ userInfo.bili1 }}</div>
								<div style="font-size:18px;margin-bottom: 5px;">{{ $t('l_benzhou') }}:{{ userInfo.bili2 }}</div>
								<div  style="font-size:18px;margin-bottom: 5px;">{{ $t('l_benyue') }}:{{ userInfo.bili3 }}</div>
								<div style="font-size:18px;margin-bottom: 5px;">{{ $t('l_shangyue') }}:{{ userInfo.bili4 }}</div>
							</div>
									<div class="pc_box">
										<div style="display: flex;justify-content: flex-start;align-items: center;">
											<!-- <el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false">
												<el-option
												      v-for="item in selectlist"
												      :key="item.value"
												      :label="item.label"
												      :value="item.value"
												    />
										
											</el-select> -->
											<el-select v-model="day" popper-class="dropdown" :popper-append-to-body="false">
												<el-option
												      v-for="item in selectlist2"
												      :key="item.value"
												      :label="item.label"
												      :value="item.value"
												    />
										
											</el-select>
											<!-- <div class="search"
												style="display: flex;justify-content: flex-start;align-items: center;">
												<el-input v-model="input1" :placeholder="$t('l_zhanghao')" />
												<span class="ant-input-suffix" @click="UsermyTeam">
													<i aria-label="图标: search" tabindex="-1"
														class="anticon anticon-search ant-input-search-icon">
														<svg viewBox="64 64 896 896" data-icon="search" width="1em"
															height="1em" fill="currentColor" aria-hidden="true"
															focusable="false" class="">
															<path
																d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
															</path>
														</svg>
													</i>
												</span>
											</div> -->
										</div>
										<div class="fanshuiBox">
											<ul>
												<li>{{$t('l_zhishuyonghuming')}}</li>
												<li>{{$t('l_zhishuzhuceshijian')}}</li>
												<li>{{$t('l_zhishuzongtouzhue')}}</li>
											</ul>
											<div class="fanlistBox">
												<ul v-for="(item,index) in zhishulist" :key="index">
													<li>
														{{item.name}}
													</li>
													<li>
														{{$F.date('Y-m-d H:i:s',item.create_time)}}
													</li>
													<li>
														¥{{item.total_money}}
													</li>
												</ul>
											</div>
										</div>
										<!-- <div class="nodata" v-if="zhishulist.length == 0">
											<img src="../../assets/images/yh/nodata.png" alt="">
											<div>{{$t('l_zanwujilu')}}</div>
										</div> -->
									</div>
								</div>
								<div class="right" v-if="selectfanshui == 2">
									<div class="pc_box">
										<div style="width:489px;margin:0 auto;">
											<div class="thitem">
												<div class="label">{{$t('l_huiyuanzhanghao')}}</div>
												<el-input v-model="input2" :placeholder="$t('l_4-16')" />
											</div>
											<div class="thitem2">
												<div class="label">{{$t('l_denglumima')}}</div>
												<div class="thitem1">
													<span>
														<i
															style="display: inline-flex; justify-content: center; align-items: center;">
															<svg viewBox="0 0 15.117 20" width="1em" height="1em"
																fill="currentColor" aria-hidden="true"
																focusable="false">
																<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite">
																</use>
															</svg>
														</i>
													</span>
													<el-input v-model="input3" :placeholder="$t('l_6-16')"
														:show-password="true" />
												</div>
											</div>
											<div class="thitem2">
												<div class="label">{{$t('l_querenmima')}}</div>
												<div class="thitem1">
													<span>
														<i
															style="display: inline-flex; justify-content: center; align-items: center;">
															<svg viewBox="0 0 15.117 20" width="1em" height="1em"
																fill="currentColor" aria-hidden="true"
																focusable="false">
																<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite">
																</use>
															</svg>
														</i>
													</span>
													<el-input v-model="input4"
														:placeholder="$t('l_zaicishurudenglumima')"
														:show-password="true" />
												</div>
											</div>
											<div class="thbtn">{{$t('l_tijiaokaihu')}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :ms="0" :xs="24">
				<div >
					<navHeader :title="$t('l_tuiguangzhuanqian')"></navHeader>
					<div class="conbox">
						<div class="header">
							<!-- <div class="EuylP4i2GhrgzkTAbaf0" @click="level = true">
								<div class="img">
									<img src="../../assets/images/yh/level.png" alt="">
								</div>
								<span>
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 10.363 17.074" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_wh--sprite"></use>
										</svg>
									</i>
								</span>
							</div> -->
							<div class="tbJe4aWRACpPqK8U19l3">
								<div class="mwkrCf7T9Q6EuRxoGPvN">
									{{$t('l_zhanghao')}}
									<span>{{userInfo?userInfo.username:""}}</span>
								</div>
								<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
									{{$t('l_zhanghuyue')}}:{{userInfo?userInfo.daili_money:""}}
								</div>
								<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
									{{ $t('l_jinrishouyi') }}:{{userInfo?userInfo.day_shouyi:""}}
								</div>
								<div style="" class="mwkrCf7T9Q6EuRxoGPvN">
									{{ $t('l_leijishouyi') }}:{{userInfo?userInfo.leiji_shouyi:""}}
								</div>
								<div class="FAnV4xyvhwu6V8VvjxOg" v-if="info && info.parentInfo">
									{{$t('l_wodeshangji')}}:
									<span>{{info.parentInfo.username}}</span>
								</div>
								<div class="FAnV4xyvhwu6V8VvjxOg" v-else-if="info && info.agentInfo">
									{{$t('l_wodeshangjidaili')}}:
									<span>{{info.agentInfo.username}}</span>
								</div>
							</div>
								<div class="KzvcBdzMHhzwjIUa04tc" @click="is_showPop=true">
								<span>{{$t('l_zhuanchu')}}</span>
								
							</div>
							<!-- <div class="KzvcBdzMHhzwjIUa04tc">
								<span>{{$t('l_kelingqu')}}</span>
								<span class="yellowColor">{{userInfo?userInfo.qm_money:""}}</span>
							</div> -->
						
						</div>
						
					</div>

					<div class="regBox" v-if="is_showPop">
							<div class="regBox_pub"></div>
							<div class="regBox_main regBox_mainTow" style="height: auto;width: 80%;">
								<p style="color: #fff;font-size: 14px;padding: 10px 20px 5px;">{{$t('l_jine')}}</p>
								<div class="search_boxTow">
									<el-input :placeholder="$t('l_shurujine')" v-model="money"
										class="search_boxTowInput">
										<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
									</el-input>
									<div class="recycle_btnTow" style="font-size: 13px;" @click="dailiTran()">
										{{$t('l_zhuanchu1')}}
									</div>
								</div>
								<div class="closeBtn" @click="closeForget">
								</div>
							</div>
						</div>


					<div class="zzc" v-if="level">
						<div class="zzcbox">
							<div class="zzccon">
								<div class="zzctext">{{$t('l_dailidengji')}}</div>
								<div class="zzcconbox">
									<div class="zzcconboxheader">
										<div class="zzcleft">
											<div>{{$t('l_dailidengji')}}</div>
										</div>
										<div class="zzcright">{{$t('l_jinshengtiaojian')}}</div>
									</div>
									<div class="zzcscroll" style="height: 300px;overflow-y: scroll;">
										<div class="zzcconboxheader" style="border: 0;" v-for="item in 10">
											<div class="zzcleft">
												<img src="../../assets/images/yh/level.png" alt="">
												<div style="color: var(--theme-alt-neutral-2);">LV1</div>
											</div>
											<div class="zzcright" style="color: var(--theme-text-color);font-size: .2rem;">0.00</div>
										</div>
									</div>
								</div>
								<img @click="level = false" class="closeIcon"
									src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
							</div>
						</div>
					</div>
					<div class="con">
						<!-- <div class="left">
							<div class="litem" @click="changefanshui(0)">
								<img v-if="selectfanshui == 0" src="../../assets/images/yh/bg.png" alt="">
								<img v-else src="../../assets/images/yh/bg1.png" alt="">
								<div class="litembox" :class="selectfanshui == 0 ? 'color':''">
									<div>{{$t('l_wodetuiguang')}}</div>
								</div>
							</div>
							<div class="litem" @click="changefanshui(1)">
								<img v-if="selectfanshui == 1" src="../../assets/images/yh/bg.png" alt="">
								<img v-else src="../../assets/images/yh/bg1.png" alt="">
								<div class="litembox" :class="selectfanshui == 1 ? 'color':''">
									<div>{{$t('l_zhishushuju')}}</div>
								</div>
							</div>
							<div class="litem" @click="changefanshui(2)">
								<img v-if="selectfanshui == 2" src="../../assets/images/yh/bg.png" alt="">
								<img v-else src="../../assets/images/yh/bg1.png" alt="">
								<div class="litembox" :class="selectfanshui == 2 ? 'color':''">
									<div>直属开户</div>
								</div>
							</div>
						</div> -->
						<div class="right">
							<div class="section">
								<div class="avMNK8Qg8S6ELvNBn4SS">
									<div style="color: #ffffff;">{{$t('l_fenxiangwangzhi')}}</div>
								</div>
								<div class="dpmKR4JWwCuEYK9NpFDV">
									<span>{{$t('l_wodelianjie')}}</span>
									<div class="p9A7GZum0WatM6xZcKB1" style="display: flex;">
										<input type="text" v-model="input" disabled />
										<!-- <el-input style="height: 100%;" v-model="input" disabled /> -->
										<span @click="copy(input)" style="padding-top:0.1rem;">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 23.001 24.3" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#comm_icon_copy_european--sprite">
													</use>
												</svg>
											</i>
										</span>
									</div>
								</div>
								<div class="LOBfirxKx9J9jD6xEP5t">
									<div class="mPCtxJBjs5n3OYLvSFuK">
										<div class="wog_6t8oeQr7zIs3lXb4">
											<div class="qrcode" ref="qrCodeUrl"></div>
											<div class="ant-btn" @click="downloadCodeImg">
												{{$t('l_changantupianbaocun')}}</div>
										</div>
									</div>
									
								</div>
							</div>
							<!-- <div class="section" style="margin-top: 0.2rem;">
								<div class="avMNK8Qg8S6ELvNBn4SS">
									<div style="color: #ffffff;">{{$t('l_yongjin')}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_leijiyongjin')}}</div>
									<div style="color: #ffaa09;">{{info?info.qm_money:0}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_yilingquyongjin')}}</div>
									<div style="color: #ffaa09;">{{info?info.user_lq_qm_money:0}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_jinriyongjin')}}</div>
									<div style="color: #ffaa09;">{{info?info.qm_money_today:0}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_benyueyongjin')}}</div>
									<div style="color: #ffaa09;">{{info?info.qm_money_month:0}}</div>
								</div>
							</div>
							<div class="section" style="margin-top: 0.2rem;margin-bottom: 2rem;">
								<div class="avMNK8Qg8S6ELvNBn4SS">
									<div style="color: #ffffff;">{{$t('l_yeji')}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_tuanduizongshu')}}</div>
									<div style="color: var(--theme-text-color);">{{info?info.zt_team_count:0}}人</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_zongyouxiaotouzhu')}}</div>
									<div style="color: var(--theme-text-color);">{{info?info.all_void_money:0}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_zongzhudanshu')}}</div>
									<div style="color: var(--theme-text-color);">{{info?info.all_void_count:0}}</div>
								</div>
								<div class="secitem">
									<div>{{$t('l_zongshuying')}}</div>
									<div style="color: var(--theme-text-color);">{{info?info.all_settledAmount:0}}</div>
								</div>
							</div> -->

						</div>
						<div class="right" ref="personDom" @scroll="handlerScroll($event)">
							<div
								style="display: flex;justify-content: flex-start;align-items: center;margin: 0.2rem 0;">
								<!-- <el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false">
									<el-option
									      v-for="item in selectlist"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value"
									    />
								
								</el-select> -->
								<el-select v-model="day" popper-class="dropdown" :popper-append-to-body="false" @change="changes()">
									<el-option
									      v-for="item in selectlist2"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value"
									    />
								
								</el-select>
								<!-- <div class="search"
									style="display: flex;justify-content: flex-start;align-items: center;">
									<el-input v-model="input1" :placeholder="$t('l_zhanghao')" />
									<span class="ant-input-suffix" @click="UsermyTeam">
										<i aria-label="图标: search" tabindex="-1"
											class="anticon anticon-search ant-input-search-icon">
											<svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false" class="">
												<path
													d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
												</path>
											</svg>
										</i>
									</span>
								</div> -->
							</div>
							
							<div class="notice_item" v-for="(item,index) in zhishulist" :key="index">
								<div class="notice_item_left">
									<div class="left_text_box">
										<div class="top_text">
											{{item.name}}
										</div>
										<div class="time_text">
											{{$F.date('Y-m-d H:i:s',item.create_time)}}
										</div>
									</div>
								</div>
								<div class="notice_item_right">
									<span >¥{{item.total_money}}</span>
								</div>
							</div>
							<!-- <div class="nodata" v-if="zhishulist.length == 0">
								<img src="../../assets/images/yh/nodata.png" alt="">
								<div>{{$t('l_zanwujilu')}}</div>
							</div> -->
							<div style="color:#fff;padding: 0.2rem;">
								<div style="font-size:0.24rem;margin-bottom: 0.1rem;">{{ $t('l_quanbu') }}:{{ userInfo.bili0 }}</div>
								<div style="font-size:0.24rem;margin-bottom: 0.1rem;">{{ $t('l_jintian') }}:{{ userInfo.bili1 }}</div>
								<div style="font-size:0.24rem;margin-bottom: 0.1rem;">{{ $t('l_benzhou') }}:{{ userInfo.bili2 }}</div>
								<div  style="font-size:0.24rem;margin-bottom: 0.1rem;">{{ $t('l_benyue') }}:{{ userInfo.bili3 }}</div>
								<div style="font-size:0.24rem;margin-bottom: 0.1rem;">{{ $t('l_shangyue') }}:{{ userInfo.bili4 }}</div>
							</div>
						</div>
						<div class="right" v-if="selectfanshui == 2">
							<div class="thbox">
								<div class="thitem">
									<div class="label">{{$t('l_huiyuanzhanghao')}}</div>
									<el-input v-model="input2" :placeholder="$t('l_4-16')" />
								</div>
								<div class="thitem2">
									<div class="label">{{$t('l_denglumima')}}</div>
									<div class="thitem1">
										<span>
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 15.117 20" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
												</svg>
											</i>
										</span>
										<el-input v-model="input3" :placeholder="$t('l_6-16')" :show-password="true" />
									</div>
								</div>
								<div class="thitem2">
									<div class="label">{{$t('l_querenmima')}}</div>
									<div class="thitem1">
										<span>
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 15.117 20" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
												</svg>
											</i>
										</span>
										<el-input v-model="input4" :placeholder="$t('l_zaicishurudenglumima')"
											:show-password="true" />
									</div>
								</div>
								<div class="thbtn">{{$t('l_tijiaokaihu')}}</div>
							</div>
						</div>
					</div>

				<div style="padding:10px;">
				
					<div class="M2J8mjTFQ9Ns9GzH6gHU">
										<div class="wOSAGKl_12mfaWIJZdGo">
											<div v-for="(item,index) in iconlist" :key="index">
												<img :src="item.key" alt="">
												<span>{{item.name}}</span>
											</div>
										</div>
									</div>
				</div>
				

				</div>

				<div style="width:100%;height:1.26rem;">

				</div>
				<Tabnav :activeInd="tabnavIndex"></Tabnav>

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'

	import QRCode from 'qrcodejs2'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			Tabnav
		},
		data() {
			return {
				money:'',
				is_showPop:false,
				level: false,

				selectfanshui: 0,
				input: '',

				mp: '0',
				day:'0',
				selectlist: [{
						value: '0',
						label: this.$t('l_shifoushouchong'),
					},
					{
						value: '1',
						label: this.$t('l_shi'),
					},
					{
						value: '2',
						label: this.$t('l_fou'),
					}
				],
				selectlist2:[
					{
						value: '-1',
						label: this.$t('l_jintian'),
					},
					{
						value: '0',
						label: this.$t('l_benzhou'),
					},
					{
						value: '1',
						label: this.$t('l_benyue'),
					},
					{
						value: '2',
						label: this.$t('l_shangyue'),
					}
				],
				input1: '',
				page: 1,
				zhishulist: [],

				input2: '',
				input3: '',
				input4: '',

				iconlist: [{
						id: 0,
						name: 'QQ',
						key: require('../../assets/images/img/qq.png'),
					},
					{
						id: 1,
						name: 'Wechat',
						key: require('../../assets/images/img/wx.png'),
					},
					{
						id: 2,
						name: 'WeChat Moments',
						key: require('../../assets/images/img/pyq.png'),
					},
					{
						id: 3,
						name: 'Facebook',
						key: require('../../assets/images/img/facebook.png'),
					},
					{
						id: 4,
						name: 'Telegram',
						key: require('../../assets/images/img/tg.png'),
					},
					{
						id: 5,
						name: 'WhatsApp',
						key: require('../../assets/images/img/wa.png'),
					},
					{
						id: 6,
						name: 'Line',
						key: require('../../assets/images/img/line.png'),
					},
				],

				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,
				info: null,
				userInfo: {
					bili0:0,
					bili1:0,
					bili2:0,
					bili3:0,
					bili4:0,
				},
				tabnavIndex:2
			}
		},
		created() {
			this.reloadUserInfo()
			this.shareInfo();
			this.UsermyTeam()
		},
		methods: {
			dailiTran(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				if (this.money < 1) {
					this.$message.error(this.$t('l_bunengdiyu1'));
					loading.close()
					return false;
				}
				this.$api.dailiTran({
					money: this.money, //金额 不能少于1元
					type: 2, // 1转入 2转出
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.is_showPop = false;
						// this.tranType = null;
						this.money = null;
						this.reloadUserInfo2()
						// this.yebInfo()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo2(reload = false) {
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					console.log(res,'res----')
					if (res.code == 0) {
						this.userInfo = res.data
						// this.input = 'http://' + window.location.host + '?invite_code=' + res.data.invite_code
						// this.creatQrCode(this.input)
						// this.creatQrCode1(this.input)
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			closeForget(){
				this.is_showPop = false;
				this.money = null;
			},
			changes(){
				this.UsermyTeam()
			},
			handlerScroll() {
				// var scrollTop = this.$refs.personDom.scrollTop; //滑入屏幕上方的高度
				// var windowHeitht = this.$refs.personDom.clientHeight; //能看到的页面的高度
				// var scrollHeight = this.$refs.personDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
				// let total = scrollTop + windowHeitht
				// if (total == scrollHeight) {
				// 	this.page++;
				// 	this.$api.UsermyTeam({
				// 		username: this.input1,
				// 		page: this.page,
				// 		day:this.day
				// 	}, (res) => {
				// 		if (res.code == 0) {
				// 			this.zhishulist = [...this.zhishulist, ...res.data]
				// 		} else {
				// 			// this.$message.error(res.msg);
				// 		}
				// 	})
				// }
			},
			mingxi_record() {
				this.$router.push('/mine/mingxi_record?type=21')
			},
			getQmMoney() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.getQmMoney({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.reloadUserInfo()
						this.shareInfo();
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			shareInfo() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.shareInfo({}, (res) => {
					loading.close()
					if (res.code == 0) {
						console.log(res)
						this.info = res.data
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			changefanshui(sum) {
				this.selectfanshui = sum;
				this.reloadUserInfo()
			},
			UsermyTeam() {
				this.$api.UsermyTeam({
					username: this.input1,
					page: this.page,
					day:this.day
				}, (res) => {
					if (res.code == 0) {
						this.zhishulist = res.data
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo(reload = false) {
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					console.log(res,'res----')
					if (res.code == 0) {
						this.userInfo = res.data
						this.input = 'http://' + window.location.host + '?invite_code=' + res.data.invite_code
						this.creatQrCode(this.input)
						this.creatQrCode1(this.input)
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			creatQrCode(e) {
				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: e, // 需要转换为二维码的内容
					width: 65,
					height: 65,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
			},
			creatQrCode1(e) {
				var qrcode = new QRCode(this.$refs.qrCodeUrl1, {
					text: e, // 需要转换为二维码的内容
					width: 105,
					height: 105,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
			},
			downloadCodeImg() {
				console.log('下载图片')
				let div = document.getElementsByClassName("qrcode")[0];
				let img = div.getElementsByTagName("img")[0];
				var a = document.createElement('a')
				a.download = name || 'pic'
				// 设置图片地址
				a.href = img.src;
				a.click();
				setTimeout(function() {
					this.$message.success(this.$t('l_baocunchenggong'))
				}, 1500)
			},
			async copy(text) {

			var tempInput = document.createElement("input");
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
			this.$message.success({
						message: this.$t('l_fuzhichenggong'),
         				center: true
				})
			// 下面这个手机端不行
				// try {
				// 	await navigator.clipboard.writeText(text);
				// 	this.$message.success({
				// 		message: this.$t('l_fuzhichenggong'),
         		// 		center: true
				// 	})
				// 	/* Resolved - 文本被成功复制到剪贴板 */
				// } catch (err) {
				// 	this.$message.success({
				// 		message:this.$t('l_fuzhishibai'),
				// 		center: true
				// 	})
				// 	console.error('Failed to copy: ', err);
				// 	/* Rejected - 文本未被复制到剪贴板 */
				// }
			},
		}
	}
</script>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	.search_boxTow {
		margin: 0px 0 20px;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}

	.recycle_btnTow {
		font-size: 15px;
		background-color: var(--theme-primary-color);
		width: 84px;
		height: 35px;
		cursor: pointer;
		color: var(--theme-primary-font-color);
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-weight: 300;
		margin-left: 10px;
	}


	.closeBtn {
		position: absolute;
		border-radius: 50%;
		z-index: 3;
		bottom: -.9rem;
		left: 0;
		right: 0;
		margin: auto;
		width: 0.5984rem;
		height: 0.5984rem;
		background-image: url(/icons/main.png);
		background-position: -5.1136rem -4.2024rem;
		background-size: 8.296rem 7.7928rem;
	}
	.regBox {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		overflow-y: overlay;
		top: 0;
		left: 0;

		.regBox_mainTow {
			border-radius: 10px;
			top: 20vh;
			width: 40%;
			height: 70%;

			b {
				margin: 10px 0px;
				color: var(--theme-text-color-darken);
				font-size: 20px;
				height: 35px;
			}

			.formsTow {
				height: 100%;
				overflow-x: hidden;
				overflow-y: overlay;
				padding: 0 15px;
				display: flex;
				flex-direction: column;
			}
		}

		.closeBtn {
			position: absolute;
			border-radius: 50%;
			z-index: 3;
			bottom: -.9rem;
			left: 0;
			right: 0;
			margin: auto;
			width: 0.5984rem;
			height: 0.5984rem;
			background-image: url(/icons/main.png);
			background-position: -5.1136rem -4.2024rem;
			background-size: 8.296rem 7.7928rem;
		}

		.closeBtnTow {
			position: absolute;
			border-radius: 50%;
			z-index: 3;
			bottom: -45px;
			left: 0;
			right: 0;
			margin: auto;
			width: 35px;
			height: 35px;
			background-image: url(/icons/main.png);
			background-position: -276px 195px;
			background-size: 450px 420px;
			cursor: pointer;
		}

		&_pub {
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 100vh;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .6);
		}

		&_main {
			position: absolute;
			z-index: 2;
			background-color: var(--theme-bg-color);
			border: thin solid;
			border-color: var(--theme-color-line);
			border-radius: 0.2rem;
			position: absolute;
			top: 26vh;
			left: 0;
			right: 0;
			width: 6rem;
			height: 7rem;
			margin: auto;
		}
	}
	.conbox {
		width: 100%;
		padding: 0.2rem;
	}

	.header {
		font-size: .24rem;
		height: 1.2rem;
		align-items: center;
		background: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 0.2rem;
		padding: 0 0.2rem;
		width: 100%;
	}

	.EuylP4i2GhrgzkTAbaf0 {
		cursor: pointer;
		height: 100%;
		position: relative;
	}

	.EuylP4i2GhrgzkTAbaf0 .img {
		height: 0.8rem;
		width: 1.04rem;
	}

	.EuylP4i2GhrgzkTAbaf0 img {
		width: 0.8rem;
	}

	.EuylP4i2GhrgzkTAbaf0 span {
		align-items: center;
		background-color: var(--theme-primary-color);
		border-radius: 50%;
		color: #ffffff;
		cursor: pointer;
		display: flex;
		height: 0.24rem;
		justify-content: center;
		left: 0.82rem;
		position: absolute;
		top: 0.05rem;
		width: 0.24rem;
		font-size: .12rem;
	}

	.tbJe4aWRACpPqK8U19l3 {
		width: 50%;
		padding: 0.2rem;
	}

	.mwkrCf7T9Q6EuRxoGPvN {
		color: var(--theme-text-color);
		font-size: .24rem;
	}

	.mwkrCf7T9Q6EuRxoGPvN span {
		color: #ffffff;
	}

	.FAnV4xyvhwu6V8VvjxOg {
		color: var(--theme-alt-neutral-2);
		padding-top: 0.05rem;
		font-size: .24rem;
	}

	.KzvcBdzMHhzwjIUa04tc {
		padding: 0.2rem 0;
		width: 30%;
		flex-grow: 1;
		text-align: right;
	}

	.KzvcBdzMHhzwjIUa04tc span {
		color: #ffffff;
		padding: 0;
		display: block;
		font-size: .24rem;
	}

	.KzvcBdzMHhzwjIUa04tc .yellowColor {
		color: #ffaa09 !important;
		font-size: .28rem;
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0 0.3rem 0.3rem;
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.zzctext {
		font-size: .3rem;
		font-weight: 700;
		color: #ffffff;
		line-height: .34rem;
		text-align: center;
		padding: 0.2rem 0;
	}

	.zzcconbox {
		color: var(--theme-alt-neutral-2);
		font-size: .16rem;
	}

	.zzcconboxheader {
		width: 100%;
		height: 0.8rem;
		background-color: #0e131b;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0.01rem solid var(--theme-color-line);
	}

	.zzcscroll .zzcconboxheader:nth-child(2n-1) {
		background-color: transparent;
	}

	.zzcleft {
		font-size: .24rem;
		padding-left: 0.3rem;
		text-align: left !important;
		color: #ffffff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.zzcleft img {
		width: 0.4rem;
		margin-right: 0.15rem;
	}

	.zzcright {
		font-size: .24rem;
		padding-right: 0.28rem;
		text-align: right !important;
		color: #ffffff;
	}

	.con {
		width: 100%;
		// display: flex;
		// justify-content: space-between;
		padding: 0 10px;
		padding-top: 10px;
	}

	.left {
		width: 75px;
		height: auto;
	}

	.litem {
		width: 100%;
		height: 35px;
		position: relative;
		margin-top: 10px;
	}

	.litem:first-child {
		margin-top: 0;
	}

	.litem>img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.litembox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 35px;
		z-index: 2;
		line-height: 35px;
		color: rgb(173, 182, 196);
	}

	.litembox.color {
		color: #fff;
	}

	.litembox>.icon {
		display: block;
		margin: 0 auto;
		width: 22px;
		height: 18px;
		font-size: .44rem;
	}

	.litembox>div {
		text-align: center;
		font-size: 12px;
	}

	.litem1 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: #04be02;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.litem2 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(0, 93, 254);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.right {
		// flex: 1;
		// height: calc(100vh - 1.2rem);
		// padding-left: 10px;
		// padding-bottom: 1.8rem;
		// overflow-y: scroll;
	}

	.section {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
	}

	.avMNK8Qg8S6ELvNBn4SS {
		height: 0.8rem;
		border-bottom: 0.01rem solid var(--theme-color-line);
		padding: 0 0.2rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: .24rem;
	}

	.dpmKR4JWwCuEYK9NpFDV {
		align-items: center;
		display: flex;
		justify-content: center;
		margin-top: 0.2rem;
		padding: 0 0.2rem;
	}

	.dpmKR4JWwCuEYK9NpFDV span {
		color: var(--theme-alt-neutral-2);
		font-size: .2rem;
		margin-right: 0.1rem;
	}

	.p9A7GZum0WatM6xZcKB1 {
		border: .01rem solid var(--theme-color-line);
		border-radius: 0.1rem;
		height: 0.7rem;
		padding-right: 0.6rem;
		position: relative;
		align-items: center;
		display: flex;
		justify-content: flex-start;
		width: 4rem;
	}

	.p9A7GZum0WatM6xZcKB1 input {
		flex: 1;
		height: 0.7rem;
		font-size: .2rem;
		background: unset;
		color: #cecece;
		border: none;
		padding: 0 0.1rem;
	}

	/deep/.el-input__inner {
		border-radius: 0.1rem !important;
		color: #adb6c4 !important;
		cursor: auto;
		font-size: .2rem !important;
		height: 0.5rem !important;
		border: none;
		// min-width: 3rem;
		overflow: hidden;
		padding: 0.04rem 0 0.04rem 0.2rem !important;
		text-overflow: ellipsis;
	}

	.p9A7GZum0WatM6xZcKB1 span {
		font-size: .3rem;
		color: var(--theme-primary-color);
		margin-left: 0.2rem;
		position: absolute;
		right: 0.1rem;
	}

	.LOBfirxKx9J9jD6xEP5t {
		align-items: center;
		box-sizing: border-box;
		// display: flex;
		justify-content: space-between;
		padding: 0.2rem;
	}

	.mPCtxJBjs5n3OYLvSFuK {
		margin-right: 0.2rem;
		// width: 1.5rem;
		display: flex;
		justify-content: center;
	}

	.wog_6t8oeQr7zIs3lXb4 {
		background: #fff;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 0.14rem;
		box-sizing: content-box;
		min-height: 1.9rem;
		width: 1.5rem;
		
	}

	.wog_6t8oeQr7zIs3lXb4 .qrcode {
		height: 1.3rem;
		margin: 0.1rem;
		width: 1.3rem;
	}

	.ant-btn {
		background-color: var(--theme-primary-color);
		border-radius: 0 0 0.05rem 0.05rem;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		color: #ffffff;
		font-size: .2rem;
		// height: .22rem;
		// line-height: .42rem;
		min-height: 0.4rem;
		padding-bottom: 0.05rem;
		// white-space: pre-wrap;
		width: 1.5rem;
		text-align: center;
		word-break: break-word;
	}

	.M2J8mjTFQ9Ns9GzH6gHU {
		flex: 1;
		overflow: hidden;
	}

	.wOSAGKl_12mfaWIJZdGo {
		align-items: flex-start;
		justify-content: flex-start;
		cursor: pointer;
		display: flex;
		min-height: 0.85rem;
		padding-bottom: 0.06rem;
		padding-top: 0.2rem;
		overflow-x: scroll;
	}

	.wOSAGKl_12mfaWIJZdGo div {
		margin-right: 0.3rem;
		align-items: center;
		display: flex;
		flex-direction: column;
		min-width: 0.75rem;
	}

	.wOSAGKl_12mfaWIJZdGo div img {
		width: 0.65rem;
		height: 0.65rem;
		border-radius: 50%;
	}

	.wOSAGKl_12mfaWIJZdGo div span {
		display: inline-block;
		font-size: .16rem;
		line-height: 1;
		max-width: 0.9rem;
		overflow: hidden;
		padding-top: 0.1rem;
		text-align: center;
		color: var(--theme-text-color);
		text-overflow: ellipsis;
	}

	.rightbtn {
		align-items: center;
		display: flex;
		color: var(--theme-primary-color);
		font-size: .24rem;
	}

	.rightbtn:after {
		content: "";
		height: 0.12rem;
		margin-left: 0.1rem;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 0.12rem;
		border-color: var(--theme-text-color);
		border-style: solid;
		border-width: 0.01rem 0.01rem 0 0;
	}

	.secitem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 0.01rem solid var(--theme-color-line);
		padding: 0.24rem 0.2rem;
		color: var(--theme-text-color);
		font-size: .24rem;
	}


	.el-select {
		width: 1.6rem;
		margin-right: 0.2rem;
		border-radius: 0.5rem;
	}

	/deep/.el-select .el-input__inner {
		min-width: auto;
		width: 1.6rem;
		height: 0.5rem !important;
		border: 0;
		padding: 0 10px !important;
		color: #55657e !important;
		border-radius: 0.5rem !important;
		border: 0.01rem solid var(--theme-color-line);
	}

	/deep/.el-select .dropdown {
		background-color: var(--theme-top-nav-bg)!important;
		border-color: #293548 !important;
		color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item {
		color: #354358 !important;
	}

	/deep/.el-select .popper__arrow {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-popper .popper__arrow::after {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: transparent;
		color: #005dfe !important;
	}

	.search {
		width: 1.4rem;
		height: 0.5rem !important;
		border-radius: 0.5rem;
		border: 0.01rem solid var(--theme-color-line);
		position: relative;
	}

	/deep/.search .el-input__inner {
		min-width: auto;
		width: 1.4rem;
		height: 0.5rem !important;
		border: 0;
		padding: 0 10px !important;
		padding-right: 30px !important;
		color: #55657e !important;
		border-radius: 0.5rem !important;
		border: 0.01rem solid var(--theme-color-line);
		font-size: .2rem;
	}

	.ant-input-suffix {
		right: 12px;
		align-items: center;
		color: var(--theme-primary-color);
		display: flex;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		font-size: .26rem;
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.thbox {
		height: 77vh;
		padding: 0.2rem;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.1rem;
		min-height: 7rem;
	}

	.thitem,
	.thitem2 {
		margin-bottom: 0.5rem;
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
		margin: 0 0 24px;
		padding: 0;
		vertical-align: top;
	}

	.label {
		margin-bottom: 0.15rem;
		line-height: .26rem;
		padding: 0 0 8px;
		text-align: left;
		color: #ffffff;
		font-size: .22rem;
	}

	/deep/.thitem .el-input__inner {
		border: 1px solid #293548 !important;
		border-radius: 0.14rem !important;
		font-size: .22rem !important;
		height: 0.7rem !important;
		padding: 0 0.6rem 0 0.2rem !important;
		color: #ffffff !important;
		background-color: var(--theme-top-nav-bg)!important;
	}

	.thitem1 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid #293548 !important;
		border-radius: 0.14rem !important;
		font-size: .22rem !important;
		height: 0.7rem !important;
		color: #ffffff !important;
		background-color: var(--theme-top-nav-bg)!important;
		position: relative;
	}

	/deep/.thitem1 .el-input__inner {
		font-size: .22rem !important;
		padding: 0 .6rem !important;
		color: #ffffff !important;
		background-color: var(--theme-top-nav-bg)!important;
	}

	.thitem1 span {
		align-items: center;
		color: var(--theme-alt-neutral-2);
		display: flex;
		line-height: 0;
		position: absolute;
		z-index: 2;
		left: 0.2rem;
		height: 0.25rem;
		width: 0.25rem;
		font-size: 14px;
	}

	.thbtn {
		height: 0.7rem;
		width: 100%;
		text-align: center;
		line-height: 0.7rem;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
		color: #ffffff;
		font-size: .2rem;
	}

	.notice_item {
		min-height: 1.2rem;
		margin-bottom: 0.2rem;
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		box-shadow: 0 0.03rem 0.09rem 0 rgba(0, 0, 0, .06);
		padding: 0.2rem;
		display: flex;
		flex-shrink: 0;
		justify-content: space-between;
		align-items: center;

		&_left {
			display: flex;
			align-items: center;

			.left_icon {
				position: relative;

				.icons {
					color: var(--theme-active-bg-color);
					font-size: .5rem;
					margin-right: 0.3rem;
				}

			}

			.left_icon::after {
				background-color: var(--theme-secondary-color-error);
				border-radius: 100%;
				content: "";
				height: 0.12rem;
				position: absolute;
				right: 0.32rem;
				top: 0.44rem;
				width: 0.12rem;
			}

			.left_text_box {
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.top_text {
					font-size: .24rem;
					max-width: 3.8rem;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					color: var(--theme-text-color-darken);
					display: inline-block;
					margin-bottom: 0.14rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time_text {
					font-size: .2rem;
					color: var(--theme-text-color-lighten);
				}
			}

		}

		&_right {
			font-size: .24rem;
			color: var(--theme-text-color-darken);
			display: flex;
			align-items: center;
			font-weight: 300;

			.finish_text {
				color: var(--theme-text-color-lighten);
			}

			.icons {
				color: var(--theme-color-line);
				transform: rotate(180deg);
				font-size: .36rem;
				margin-left: 0.1rem;
				margin-bottom: 0.08rem;
			}
		}
	}

	@media only screen and (min-width: 768px) {
		.el-col-xs-24 {
			display: none;
			width: 0%;
		}
	}

	.regBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;

		.rbbox {
			width: 489px;
			height: 627px;
			background-color: var(--theme-top-nav-bg);;
			border: thin solid;
			border-color: var(--theme-color-line);
			border-radius: 10px;
			position: relative;
			padding: 0 23px 15px 23px;
		}

		.close {
			color: var(--theme-text-color);
			font-size: 12px;
			height: 44px;
			line-height: 44px;
			width: 44px;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
		}

		.title {
			margin-top: 15px;
			margin-bottom: 31px;
			font-size: 17px;
			color: #fff;
			font-weight: 700;
			text-align: center;
		}

		.zzccon {
			height: auto;
			background-color: var(--theme-top-nav-bg);;
			border: 0;
			border-radius: 7px;
			position: relative;
			padding: 0 24px 24px;
		}

		.zzcconbox {
			color: var(--theme-alt-neutral-2);
			font-size: 16px;
		}

		.zzcconboxheader {
			width: 100%;
			height: 48px;
			background-color: #0e131b;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid var(--theme-color-line);
			border-radius: 7px;
		}

		.zzcscroll .zzcconboxheader:nth-child(2n-1) {
			background-color: transparent;
		}

		.zzcscroll::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}

		.zzcleft {
			font-size: 16px;
			padding-left: 24px;
			text-align: left !important;
			color: #ffffff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.zzcleft img {
			width: 32px;
			margin-right: 12px;
		}

		.zzcright {
			font-size: 13px;
			padding-right: 24px;
			text-align: right !important;
			color: #ffffff;
		}
	}

	.pc_conboxs {
		.litem1 {
			width: 81px;
			height: 32px;
			padding: 0 2.5px;
			line-height: 32px;
			text-align: center;
			font-size: 14px;
			color: #ffff;
			background-color: #04be02;
			border-radius: 7px;
			margin: 0;
			margin-top: 0;
			margin-right: 10px;
		}

		.litem2 {
			width: 81px;
			height: 32px;
			padding: 0 2.5px;
			line-height: 32px;
			text-align: center;
			font-size: 14px;
			color: #ffff;
			background-color: rgb(0, 93, 254);
			border-radius: 7px;
			margin: 0;
			margin-top: 0;
		}

		.conbox {
			width: 100%;
			padding: 0;
			margin-top: 16px;
		}

		.header {
			font-size: 16px;
			height: 81px;
			align-items: center;
			background: var(--theme-top-nav-bg);;
			border-radius: 7px;
			display: flex;
			justify-content: flex-start;
			margin-bottom: 16px;
			padding: 0 16px;
			width: 100%;
		}

		.EuylP4i2GhrgzkTAbaf0 {
			cursor: pointer;
			height: 100%;
			position: relative;
		}

		.EuylP4i2GhrgzkTAbaf0 .img {
			height: 65px;
			width: 84px;
		}

		.EuylP4i2GhrgzkTAbaf0 img {
			width: 65px;
		}

		.EuylP4i2GhrgzkTAbaf0 span {
			align-items: center;
			background-color: var(--theme-primary-color);
			border-radius: 50%;
			color: #ffffff;
			cursor: pointer;
			display: flex;
			height: 19px;
			justify-content: center;
			left: 66px;
			position: absolute;
			top: 4px;
			width: 19px;
			font-size: 12px;
		}

		.tbJe4aWRACpPqK8U19l3 {
			width: 50%;
			padding: 16px;
		}

		.mwkrCf7T9Q6EuRxoGPvN {
			color: var(--theme-text-color);
			font-size: 16px;
		}

		.mwkrCf7T9Q6EuRxoGPvN span {
			color: #ffffff;
		}

		.FAnV4xyvhwu6V8VvjxOg {
			color: var(--theme-alt-neutral-2);
			padding-top: 4px;
			font-size: 16px;
		}

		.KzvcBdzMHhzwjIUa04tc {
			padding: 16px 0;
			width: 30%;
			flex-grow: 1;
			text-align: right;
		}

		.KzvcBdzMHhzwjIUa04tc span {
			color: #ffffff;
			padding: 0;
			display: block;
			font-size: 16px;
		}

		.KzvcBdzMHhzwjIUa04tc .yellowColor {
			color: #ffaa09 !important;
			font-size: 18px;
		}

		.con {
			width: 100%;
			// display: flex;
			// justify-content: space-between;
			padding: 0;
			padding-top: 0;
			background-color: transparent;
		}

		.left {
			width: 106px;
			height: auto;
		}

		.litem {
			width: 100%;
			height: 49px;
			position: relative;
			margin-top: 16px;
			cursor: pointer;
		}

		.litem:first-child {
			margin-top: 0;
		}

		.litem>img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.litembox {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 49px;
			z-index: 2;
			line-height: 49px;
			color: rgb(173, 182, 196);
		}

		.litembox.color {
			color: #fff;
		}

		.litembox>div {
			text-align: center;
			font-size: 16px;
		}

		.right {
			flex: 1;
			height: auto;
			padding-left: 20px;
			padding-bottom: 0;
			overflow-y: visible;
		}

		.section {
			background-color: var(--theme-top-nav-bg);;
			border-radius: 7px;
		}

		.avMNK8Qg8S6ELvNBn4SS {
			height: 48px;
			border-bottom: 1px solid var(--theme-color-line);
			padding: 0 16px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
		}

		.pcflex {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 16px;
		}

		.mPCtxJBjs5n3OYLvSFuK {
			margin-right: 16px;
			width: 122px;
		}

		.wog_6t8oeQr7zIs3lXb4 {
			background: #fff;
			border: 1px solid var(--theme-color-line);
			border-radius: 10px;
			box-sizing: content-box;
			min-height: 154px;
			width: 124px;
		}

		.wog_6t8oeQr7zIs3lXb4 .qrcode {
			height: 106px;
			margin: 8px;
			width: 106px;
		}

		.ant-btn {
			background-color: var(--theme-primary-color);
			border-radius: 0 0 7px 7px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			color: #ffffff;
			font-size: 16px;
			// height: 32px;
			min-height: 32px;
			line-height: 32px;
			padding-bottom: 4px;
			// white-space: pre-wrap;
			width: 124px;
			text-align: center;
			word-break: break-word;
		}

		.pcflex1 {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.pcflex1>span {
			width: 100%;
			color: var(--theme-alt-neutral-2);
			font-size: 16px;
			margin-right: 0;
			margin-bottom: 8px;
			text-align: left;
		}

		.p9A7GZum0WatM6xZcKB1 {
			width: 100%;
			border: 1px solid var(--theme-color-line);
			border-radius: 7px;
			height: 40px;
			padding-right: 50px;
			position: relative;
			align-items: center;
			display: flex;
			justify-content: flex-start;
		}

		/deep/.el-input__inner {
			border-radius: 7px !important;
			color: #adb6c4 !important;
			cursor: auto;
			font-size: 16px !important;
			height: 38px !important;
			border: none;
			min-width: 50px;
			flex: 1;
			overflow: hidden;
			padding: 0 0 0 11px !important;
			text-overflow: ellipsis;
		}

		.p9A7GZum0WatM6xZcKB1 span {
			font-size: 16px;
			color: var(--theme-primary-color);
			margin-left: 16px;
			position: absolute;
			right: 16px;
			cursor: pointer;
		}

		.wOSAGKl_12mfaWIJZdGo {
			width: 100%;
			align-items: flex-start;
			justify-content: flex-start;
			cursor: pointer;
			display: flex;
			min-height: 94px;
			padding-bottom: 4px;
			padding-top: 16px;
			overflow-x: visible;
		}

		.wOSAGKl_12mfaWIJZdGo div {
			margin-right: 24px;
			align-items: center;
			display: flex;
			flex-direction: column;
			min-width: 61px;
		}

		.wOSAGKl_12mfaWIJZdGo div img {
			width: 39px;
			height: 39px;
			border-radius: 50%;
		}

		.wOSAGKl_12mfaWIJZdGo div span {
			display: inline-block;
			font-size: 13px;
			line-height: 1;
			max-width: 61px;
			overflow: hidden;
			padding-top: 8px;
			text-align: center;
			color: var(--theme-text-color);
			text-overflow: ellipsis;
		}

		.rightbtn {
			align-items: center;
			display: flex;
			color: var(--theme-primary-color);
			font-size: 14px;
		}

		.rightbtn:after {
			content: "";
			height: 8px;
			margin-left: 8px;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			width: 8px;
			border-color: var(--theme-text-color);
			border-style: solid;
			border-width: 1px 1px 0 0;
		}

		.secitem {
			width: 33%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 0;
			border-right: 1px solid var(--theme-color-line);
			padding: 12px 16px;
			color: var(--theme-text-color);
			font-size: 16px;
		}

		.secitem:nth-child(4n) {
			border-right: 0;
		}

		.el-select {
			width: 130px;
			margin-right: 16px;
			border-radius: 50px;
			border: 1px solid var(--theme-color-line);
		}

		/deep/.el-select .el-input__inner {
			min-width: auto;
			width: 130px;
			height: 38px !important;
			border: 0;
			padding: 0 12px !important;
			color: #55657e !important;
			border-radius: 50px !important;
			border: 1px solid var(--theme-color-line);
		}

		/deep/.el-select .dropdown {
			background-color: var(--theme-top-nav-bg)!important;
			border-color: #293548 !important;
			color: #293548 !important;
		}

		/deep/.el-select .el-select-dropdown__item {
			color: #354358 !important;
		}

		/deep/.el-select .popper__arrow {
			border-bottom-color: #293548 !important;
		}

		/deep/.el-select .el-popper .popper__arrow::after {
			border-bottom-color: #293548 !important;
		}

		/deep/.el-select .el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background-color: transparent;
			color: #005dfe !important;
		}

		/deep/.el-input__suffix {
			display: block !important;
			top: 5px !important;
			right: 8px !important;
		}

		/deep/.el-input__icon {
			width: 15px !important;
			line-height: 14px !important;
			font-size: 14px !important;
		}

		.search {
			width: 179px;
			height: 40px !important;
			border-radius: 50px;
			border: 1px solid var(--theme-color-line);
			position: relative;
		}

		/deep/.search .el-input__inner {
			min-width: auto;
			width: 179px;
			height: 38px !important;
			border: 0;
			padding: 0 12px !important;
			padding-right: 30px !important;
			color: #55657e !important;
			border-radius: 40px !important;
			border: 1px solid var(--theme-color-line);
			font-size: 16px;
		}

		.ant-input-suffix {
			right: 12px;
			align-items: center;
			color: var(--theme-primary-color);
			display: flex;
			line-height: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
			font-size: 20px;
		}

		.pc_box {
			width: 100%;
			padding: 16px;
			padding-bottom: 28px;
			border-radius: 7px;
			background-color: var(--theme-main-bg-color);
		}

		.nodata {
			margin: 0 auto;
			text-align: center;
			margin-top: 100px;
		}

		.nodata img {
			height: 221px;
			margin-bottom: 7px;
			margin: 0 auto;
			width: 244px;
		}

		.nodata div {
			color: var(--theme-alt-neutral-2);
			font-size: 18px;
		}

		.thitem,
		.thitem2 {
			margin-bottom: 24px;
			color: rgba(0, 0, 0, .65);
			font-size: 14px;
			font-variant: tabular-nums;
			line-height: 1.5;
			list-style: none;
			margin: 0 0 24px;
			padding: 0;
			vertical-align: top;
		}

		.label {
			margin-bottom: 9px;
			line-height: 21px;
			padding: 0;
			text-align: left;
			color: #ffffff;
			font-size: 14px;
		}

		/deep/.thitem .el-input__inner {
			border: 1px solid #293548 !important;
			border-radius: 7px !important;
			font-size: 14px !important;
			height: 40px !important;
			padding: 0 40px 0 12px !important;
			color: #ffffff !important;
			background-color: var(--theme-top-nav-bg)!important;
		}

		.thitem1 {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border: 1px solid #293548 !important;
			border-radius: 7px !important;
			font-size: 14px !important;
			height: 40px !important;
			color: #ffffff !important;
			background-color: var(--theme-top-nav-bg)!important;
			position: relative;
		}

		/deep/.thitem1 .el-input__inner {
			height: 38px !important;
			font-size: 14px !important;
			padding: 0 40px !important;
			color: #ffffff !important;
			background-color: var(--theme-top-nav-bg)!important;
		}

		/deep/.thitem1 .el-input__suffix {
			top: 2px !important;
		}

		.thitem1 span {
			align-items: center;
			color: var(--theme-alt-neutral-2);
			display: flex;
			line-height: 0;
			position: absolute;
			z-index: 2;
			left: 14px;
			height: 16px;
			width: 16px;
			font-size: 14px;
		}

		.thbtn {
			height: 44px;
			width: 100%;
			text-align: center;
			line-height: 44px;
			border-radius: 7px;
			background-color: var(--theme-primary-color);
			color: #ffffff;
			font-size: 16px;
		}
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.fanshuiBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-between;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}

	.fanshuiBox>ul li {
		width: 18%;
		text-align: center;
	}

	.fanshuiBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanshuiBox>ul li:nth-child(6) {
		width: 10%;
	}

	.fanlistBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-between;
		border-radius: 5px;
	}

	.fanlistBox>ul li {
		width: 18%;
		text-align: center;
		color: var(--theme-text-color);
	}

	.fanlistBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}
</style>